<template>
  <div class="xm-pagination">
    <!-- 分页 -->
    <!-- 上一页 -->
    <div class="pg-btn prev" @click="handPrevPage">
      <img src="../../assets/img/left_gray.png" alt>
    </div>
    <!-- 页码 -->
    <ul class="pager">
      <li
        v-bind:class="[page === current ? 'page-current' : '', 'page-item']"
        v-for="page in total"
        @click="handPageClick(page)"
      >{{page}}</li>
    </ul>
    <!-- 下一页 -->
    <div class="pg-btn next" @click="handNextPage">
      <img src="../../assets/img/right_gray.png" alt>
    </div>
    <!-- 跳转 -->
    <div class="jumper">
      <div class="jum-to">跳至</div>
      <input
        class="jum-ipt"
        type="number"
        max="total"
        min="1"
        v-model="pageCur"
        v-on:keyup.13="handPageEnter()"
      >
      <div class="jum-pa">页</div>
    </div>
    <!-- 总数 -->
    <div class="total">显示1到20，共{{total}}记录</div>
  </div>
</template>

<script>
export default {
  name: "pagination",
  components: {},
  props: ["total", "current"],
  data() {
    return {
      pageCur: this.current
    };
  },
  computed: {
    lang() {
      return this.$t("lang");
    }
  },
  methods: {
    handNextPage() {
      //下一页
      if (this.pageCur < this.total) {
        this.pageCur++;
        this.$emit("current-change", this.pageCur);
      } else {
        return;
      }
    },
    handPrevPage() {
      //上一页
      if (this.pageCur > 1) {
        this.pageCur--;
        this.$emit("current-change", this.pageCur);
      } else {
        return;
      }
    },
    handPageClick(page) {
      //点击页码
      this.pageCur = page;
      this.$emit("current-change", this.pageCur);
    },
    handPageEnter() {
      var val = Number(
        this.$el.querySelector("input").value
      ); /* 获取的是字符串 */
      if (val > this.total) {
        this.pageCur = this.total;
      } else if (val < 1) {
        this.pageCur = 1;
      } else {
        this.pageCur = val;
      }
      this.$emit("current-change", this.pageCur);
    }
  },
  watch: {
    current(newVal, oldVal) {}
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.xm-pagination {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xm-pagination .pg-btn {
  width: 24px;
  height: 24px;
  background-color: #e9e9e9;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
}
.xm-pagination .pg-btn img {
  width: 6px;
  height: 10px;
}
.xm-pagination .pager {
  height: 100%;
  display: flex;
}
.xm-pagination .pager .page-item {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #e9e9e9;
  border-radius: 2px;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #888888;
}
.xm-pagination .next {
  margin-left: 8px;
}
.xm-pagination .jumper {
  height: 100%;
  display: flex;
  align-items: center;
}
.xm-pagination .jumper .jum-to,
.xm-pagination .jumper .jum-pa {
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #222222;
}
.xm-pagination .jumper .jum-to {
  padding: 0 8px 0 15px;
}
.xm-pagination .jumper .jum-pa {
  padding-left: 10px;
}
.xm-pagination .jumper .jum-ipt {
  width: 56px;
  height: 24px;
  border: solid 1px #7e6b5a;
  box-sizing: border-box;
  text-align: center;
}
.xm-pagination .total {
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #222222;
  margin-left: 27px;
}
.xm-pagination .pager .page-current {
  background-color: #7e6b5a;
  color: #ffffff;
}
.xm-pagination .jum-ipt::-webkit-outer-spin-button,
.xm-pagination .jum-ipt::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.xm-pagination .jum-ipt[type="number"] {
  -moz-appearance: textfield;
}
</style>
